<template>
    <main-layout :showBack="false">
        <div class="index-container">
            <!-- 头部搜索框 -->
            <div class="index-head">
                <div class="left">
                    <span class="iconfont">&#xe60b;</span>
                    <span>成都</span>
                </div>
                <div class="right">
                    <van-search
                        v-model="value"
                        show-action
                        placeholder="请输入搜索关键词"
                        background="#43B985"
                        style="padding:7px;"
                        @search="onSearch"
                        >
                        <template #action>
                            <div @click="onSearch">搜索</div>
                        </template>
                    </van-search>
                </div>
            </div>
            <!-- 分类 -->
            <div class="classify">
                <div class="item" @click="classifyEvt(it.text)" v-for="it in classifyList" :key="it.img">
                    <img v-lazy="it.img" />
                    <span class="text">{{it.text}}</span>
                </div>
            </div>
            <!-- 轮播图 -->
            <div class="banner">
                <van-swipe :autoplay="3000">
                    <van-swipe-item v-for="(image, index) in images" :key="index">
                        <img v-lazy="image.img" />
                    </van-swipe-item>
                </van-swipe>
            </div>
            <!-- 榜单推荐 -->
            <div class="top">
                <div class="title">
                    <span class="iconfont">&#xe614;</span>
                    <span>推荐榜单</span>
                </div>
                <div class="top-block">
                    <div class="item">
                        <img src="../../static/imgs/small.jpg" alt="">
                        <span class="topname">人气榜</span>
                        <div class="top-desc">
                            <div class="title">优质好猪榜</div>
                            <div class="amount">点击量：2354</div>
                        </div>
                    </div>
                    <div class="item">
                        <img src="../../static/imgs/small.jpg" alt="">
                        <span class="topname">关注榜</span>
                        <div class="top-desc">
                            <div class="title">人气商家榜</div>
                            <div class="amount">关注量：4561</div>
                        </div>
                    </div>
                    <div class="item">
                        <img src="../../static/imgs/small.jpg" alt="">
                        <span class="topname">收藏榜</span>
                        <div class="top-desc">
                            <div class="title">人气猪猪榜</div>
                            <div class="amount">收藏量：584</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main-layout>
</template>

<script>
    export default {
        data() {
            return {
                value: '',
                images: [
                    {img:'https://img0.baidu.com/it/u=2686241399,3203896439&fm=253&fmt=auto&app=120&f=JPEG?w=600&h=400', url: ''},
                    {img:'https://img2.baidu.com/it/u=3131845848,233875098&fm=253&fmt=auto&app=138&f=JPEG?w=637&h=500', url: ''},
                ],
                classifyList: [
                    {img: 'https://cbu01.alicdn.com/img/ibank/2019/125/811/10672118521_1423060058.220x220.jpg', text: '双月猪'},
                    {img: 'https://img0.baidu.com/it/u=2425889866,2004939139&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333', text: '胖猪'},
                    {img: 'https://img0.baidu.com/it/u=2146217876,392172974&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=480', text: '架子猪'},
                    {img: 'https://img1.baidu.com/it/u=1252843175,3920510266&fm=253&fmt=auto&app=138&f=JPEG?w=607&h=388', text: '猪妈妈'}
                ]
            }
        },
        methods: {
            onSearch(val) {
                this.$router.push({path:'/product/list', query: {value: this.value}})
            },
            classifyEvt(text) {
                this.$router.push({path:'/product/list', query: {value: this.value}})
            }
        },
    }
</script>

<style lang="less" scoped>
    @import "../../style/common.less";
    .index-container{  
        width: 100%;
        height: 100%;
        // background-color: @cdd;
        .index-head {
            height: 48px;
            background-color: @c43;
            display: flex;
            .left {
                width: 50px;
                text-align: center;
                font-size: .7rem;
                line-height: 48px;
            }
            .right {
                flex: 1;
                line-height: 48px;
            }
        }
        .classify{
            display: flex;
            justify-content: space-around;
            padding: 12px 0;
            .item{
                width: 60px;
                height: 80px;
                font-size: .75rem;
                text-align: center;
                img{
                    width: 46px;
                    height: 46px;
                    border-radius: 30px;
                }
                .text{
                    display: block;
                }
            }
        }
        .banner {
            width: 100%;
            height: 230px;
            .van-swipe-item{
                text-align: center;
                width: 96%;
            }
            img{
                width: 96%;
                height: 220px;
                text-align: center;
            }
        }
        .top{
            height: calc(100% - 430px);
            .title{
                font-size: 18px;
                font-weight: bold;
                display: inline-block;
                span{
                    display: inline-block;
                    padding-left: 8px;
                }
                .iconfont{
                    font-size: 22px;
                    font-weight: bold;
                    color: @cf0;
                }
            }
            .top-block {
                background-color: @cdd;
                width: 100%;
                height: calc(100% - 32px);
                padding: 0 12px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-wrap: nowrap;
                .item {
                    height: 90%;
                    width: 112px;
                    background-color: white;
                    border-radius: 10px;
                    text-align: center;
                    position: relative;
                    img {
                        width: 90%;
                        margin-top: 8px;
                        position: relative;
                    }
                    .topname{
                        display: block;
                        width: 65px;
                        height: 26px;
                        line-height: 26px;
                        font-size: .7rem;
                        font-weight: bold;
                        border: 2px solid aquamarine;
                        border-radius: 20px;
                        margin: auto;
                        z-index: 12;
                        position: relative;
                        background-color: white;
                    }
                    .top-desc{
                        width: 100%;
                        height: 30%;
                        font-size: .6rem;
                        background-color: aquamarine;
                        position: absolute;
                        left: 0;
                        bottom: 0;
                        padding-top: 16px;
                        .title{
                            font-size: .65rem;
                            font-weight: bold;
                        }
                        .amount{
                            font-size: .6rem;
                            font-weight: normal;
                        }
                    }
                }
            }
        }
    }
</style>